<template>
    <div class="open_box">
        <div class="dati_box">
            <div class="timex">
                <div class="pages_box">
                    <span>{{ page + 1 }}</span>/{{ dtexam.length }}
                </div>
                <div class="block_img">
                    <img src="@/assets/times.svg" alt="">
                    <span>{{ second }}</span>
                </div>
            </div>
            <div v-for="(item, index) in dtexam" :key="index" v-show="page == index">
                <div class="text_exam">
                    <p>
                        <span>{{ item.type == 1 ? "【单选题】" : "【多选题】" }}</span>
                        {{ item.title }}
                    </p>
                </div>
                <div v-for="(ite, ind) in item.option">
                    <div class="_A" @click="questanswer(ind)" :class="activeobj(ind)">
                        <div class="span">
                            {{ String.fromCharCode(65 + ind) }}
                        </div>
                        <div>
                            {{ ite
                            }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="sxqh">
                <div class="navexam" style="cursor: pointer;" @click="tosubmit" v-if="page > 0">
                    <button>上一题</button>
                </div>
                <div class="zhanwi" v-else></div>
                <div class="goexam" style="cursor: pointer;" @click="submit">
                    <button>{{ dtexam.length - 1 == page ? "完成" : "下一题" }}</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { assess_exam, assess_submit } from '@/api/team'
import { ref, onBeforeUnmount } from 'vue';
let Router = useRouter()
let Route = useRoute()
console.log(Route.query, 'lianquery')
let dtexam: any = ref<any>([])
let second = ref()
let data = ref({
    assess_id: Route.query.id
})
let page: any = ref(0)
let wdanswer: any = ref()
let iddd = ref()
const practiceexam = () => {
    assess_exam(data.value).then(res => {
        dtexam.value = res.data.data.question
        iddd.value = res.data.data.record_id
        console.log(iddd.value, 'sqqqqqs')
        second.value = res.data.data.seconds
        let daanlen = dtexam.value.length
        // let daanlen = 20
        wdanswer.value = new Array(daanlen)
        for (let i = 0; i < daanlen; i++) {
            wdanswer.value[i] = [];
        }
        console.log(wdanswer.value, '11111111111111111111111')
    })
}
practiceexam()
const questanswer = (index: any) => {
    const { type } = dtexam.value[page.value];
    const id = String.fromCharCode(65 + index)
    let currAns = wdanswer.value[page.value]
    if (type === 1) {
        currAns = [id]
    } else {
        const isFind = currAns.includes(id)
        if (isFind) {
            const i = currAns.findIndex((item: any) => {
                return item == id
            })
            currAns.splice(i, 1)
        } else {
            currAns.push(id)
            // currAns.join('')
            currAns = currAns.sort()
            // currAns = aa
        }
    }
    wdanswer.value[page.value] = currAns
    // console.log(wdanswer.value[page.value].join(''), ',,,')
}
// let list: any = ref()
// const convertAnswer = (answer: any) => {
//     const mapping: any = {
//         0: 'A',
//         1: 'B',
//         2: 'C',
//         3: 'D',
//         4: 'E',
//         5: 'F',
//         // 添加更多的映射关系，根据具体需求进行调整
//     };
//     const result = [];
//     for (let i = 0; i < answer.length; i++) {
//         let str = '';
//         for (let j = 0; j < answer[i].length; j++) {
//             const key = String(answer[i][j]);
//             if (mapping[key]) {
//                 str += mapping[key];
//             }
//         }
//         result.push(str);
//     }

//     return result;
// }
// let jieguo = ref()
// const convertToLetters = () => {
//     list.value = wdanswer.value;
//     jieguo.value = list.value.join(",")
//     console.log(jieguo.value, 'AAAAAAAAAAAAA')
// }
//高亮
const activeobj = (ind: any) => {
    ind = String.fromCharCode(65 + ind)
    const isActive = wdanswer.value[page.value].includes(ind)
    if (isActive) {
        let obj: any
        const isB: boolean = wdanswer.value[page.value].includes(ind)
        obj = {
            activeA: isB
        }
        return obj;
    }
    return {}
}
let timer: number
const times = () => {
    timer = setInterval(async () => {
        second.value--;
        if (second.value <= 0) {
            clearInterval(timer);
            // this.convertToLetters()
            const combinedArray = Object.values(wdanswer.value).map((arr: any) => arr.join(''))
            let daan = combinedArray.join(',')
            console.log(daan, 'iddd')
            let data = {
                record_id: iddd.value,
                result: daan
            }
            assess_submit(data).then(res => {
                let chuan = res.data.data
                console.log(res.data.data, 'result')
                let arr = JSON.stringify(chuan)
                console.log(arr)
                Router.push({ path: '/home/examresult', query: { chuan: arr } })
            })
        }
    }, 1000); // 每秒钟执行一次
}
times()

const submit = () => {
    // Router.push('/home/examresult')
    if (page.value < dtexam.value.length - 1) {
        page.value++;
    } else {
        const combinedArray = Object.values(wdanswer.value).map((arr: any) => arr.join(''))
        let daan = combinedArray.join(',')
        console.log(daan, 'iddd')
        let data = {
            record_id: iddd.value,
            result: daan
        }
        clearInterval(timer);
        assess_submit(data).then(res => {
            let chuan = res.data.data
            console.log(res.data.data, 'result')
            let arr = JSON.stringify(chuan)
            console.log(arr)
            Router.push({ path: '/home/examresult', query: { chuan: arr } })
        })
    }
}
const tosubmit = () => {
    page.value--

}
onBeforeUnmount(() => {
    clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.navexam {
    // position: absolute;
    // bottom: 10px;
    // left: 10px;

    button {
        width: 240px;
        height: 60px;
        background: #e020202a;
        color: #E02020;
        font-size: 24px;
        border-radius: 35px;
        border: none;

    }
}

.goexam {
    // position: absolute;
    // bottom: 10px;
    // right: 10px;

    button {
        width: 240px;
        height: 60px;
        background: #E02020;
        color: #fff;
        font-size: 24px;
        border-radius: 35px;
        border: none;
        font-size: 24px;

    }
}

.flags {
    margin: 30px 15px;
    color: #FF4F4F;
}

.aa {
    margin: 10px 15px;
}

._A {
    display: flex;
    // line-height: 50px;
    padding: 10px;
    background: #f9f9f9;
    border: solid 1px transparent;
    border-radius: 25px;
    margin-top: 30px;
    color: #999999;
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;

    .span {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        color: #999999;
        font-size: 18px;
    }

}

.text_exam {
    font-size: 18px;
    margin: 20px 10px;
    line-height: 35px;

    span {
        color: #FF4F4F;
    }
}

.timex {
    display: flex;
    justify-content: space-between;

    .pages_box {
        width: 72px;
        height: 30px;
        background: #FFDFDF;
        color: #FF4F4F;
        text-align: center;
        line-height: 30px;
        font-weight: 700;
        border-radius: 5px;
        margin: 10px;

        span {
            font-size: 16px;
        }
    }

    .block_img {
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin: 10px;
        text-align: center;

        img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }

        span {
            font-size: 16px;
        }
    }
}

.open_box {
    width: 98%;
    margin-left: 1%;
    background: #fff;
    // height: 1200px;
    // overflow: auto;
}

.dati_box {
    width: 70%;
    padding: 67px 15%;
    // height: 800px;
    // position: relative;
}

.activeA {
    // background: #315ad547;
    // border: solid 1px #E02020;
    border-color: #E02020;
    // span {
    //     background: #3159D5;
    //     color: #fff;
    // }
}

.activeB {
    background: #17a41028;

    span {
        background: #17A410;
        color: #fff;
    }
}

.fla {
    margin: 30px 15px;
    color: #17A410;
}

// @media (min-width: 2160px) {
//     .open_box {
//         width: 100%;
//         margin: 0 auto;
//         background-color: #fff;
//     }
// }

// @media (max-width: 2159px) {
.open_box {
    width: 1080px;
    margin: 0 auto;
    background-color: #fff;
}

.sxqh {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.zhanwi {
    width: 240px;
    height: 60px;
    // background: #e020202a;
    // color: #E02020;
    // font-size: 24px;
    // border-radius: 35px;
    // border: none;
}
</style>